<template>
  <view class="main">
    <view class="ip-item">
      <input
        type="text"
        v-model="money"
        placeholder="请设置收费金额"
        placeholder-class="ip"
      />
    </view>
    <view class="ip-item" @click="groupShow = true">
      <input
        type="text"
        v-model="formData.community"
        placeholder="请选择收费周期"
        disabled
        placeholder-class="ip"
      />
      <image src="/static/icon/down.svg" mode="widthFix" />
      <view class="block"></view>
    </view>
  </view>
  <view class="btns">
    <Button
      @clickButton="carete"
      :loading="loading"
      loading-text="保存中"
      text="保存"
    />
  </view>

  <!-- 入群填写项 -->
  <van-popup v-model:show="groupShow" position="bottom" round>
    <van-picker
      title="收费周期"
      :columns="columns"
      @confirm="onConfirm"
      @cancel="onCancel"
    />
    <!-- <view class="pop-main">
      <view class="pop-title dispaly-just-between">
        <view class="cancel" @click="groupShow = false">取消</view>
        <view class="confirm" @click="groupConfirm">确定</view>
      </view>
      <view class="list">
        <scroll-view scroll-y="true" class="scroll-Y">
          <view
            :class="{ active: item.isSelect }"
            class="item"
            @click="clickItem(item, index)"
            v-for="(item, index) in groupTypeList"
            :key="index"
            >{{ item.name }}</view
          >
        </scroll-view>
      </view>
    </view> -->
  </van-popup>
</template>

<script lang="ts" setup>
import { ref, watch } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { createCircle, getWriteFillList, circleInfo } from "@/api/apiList";

// 推荐规则
const detail = ref(`
<div>1、推荐热点干货文章，管理类，市场类，技能类优先</div>
<div>2、不得推荐低俗，广告性质严重，有违社会主义核心价
     值观的文章</div>
<div>3、推荐文章审核通过后可以上首页推荐</div>
`);

const groupShow = ref(false);

const formData = ref({
  community: "",
  desc: "",
});

// 监听输入的详情字数
const descNumber = ref(0);
watch(
  () => formData.value.desc,
  () => {
    descNumber.value = formData.value.desc.length;
  },
  { deep: true }
);

// const groupTypeList = ref([
//   { name: "姓名", type: "name", isSelect: false },
//   { name: "手机号", type: "tel", isSelect: false },
//   { name: "单位/公司", type: "com", isTrue: false, isSelect: false },
//   { name: "部门职位", type: "job", isTrue: false, isSelect: false },
//   { name: "邮箱", type: "email", isTrue: false, isSelect: false },
//   { name: "微信号", type: "wx", isTrue: false, isSelect: false },
//   { name: "QQ", type: "QQ", isTrue: false, isSelect: false },
//   { name: "常住城市", type: "city", isTrue: false, isSelect: false },
//   { name: "生日", type: "birthday", isTrue: false, isSelect: false },
//   { name: "毕业学校", type: "school", isTrue: false, isSelect: false },
//   { name: "家乡", type: "home", isTrue: false, isSelect: false },
//   { name: "业务或专长", type: "specialty", isTrue: false, isSelect: false },
// ]);

// 点击入群项
const clickItem = (item, _index) => {
  item.isSelect = !item.isSelect;
};

const selectGoupProject = ref([]);
// 确定入群项
const groupConfirm = () => {
  const selectList = groupTypeList.value.filter((item) => item.isSelect);
  selectGoupProject.value = [...selectList];
  let selectGoupProjectNameList = [];
  selectGoupProject.value.forEach((item) =>
    selectGoupProjectNameList.push(item.name)
  );
  formData.value.community = selectGoupProjectNameList.join(",");
  groupShow.value = false;
};

const getId = ref();
const businessCode = ref();
onLoad((e) => {
  if (e?.id) {
    getId.value = e?.id;
    circleInfoData(e?.id);
  }
  if (e?.businessCode) {
    businessCode.value = e?.businessCode;
  }
  getWriteFillData();
});

const columns = ref([]);
const getWriteFillData = async () => {
  const response = await getWriteFillList("/join_ctyle");
  if (response && response?.code == 200) {
    response?.data.map((items) => {
      columns.value.push({
        text:
          items.dictValue == "永久" ? items.dictValue : items.dictValue + "天",
        value: items.dictValue,
      });
    });
  }
};

const onConfirm = (e) => {
  formData.value.community =
    e?.selectedValues[0] == "永久"
      ? e?.selectedValues[0]
      : e?.selectedValues[0] + "天";
  getDays.value = e?.selectedValues[0];
  groupShow.value = !groupShow.value;
};

const onCancel = () => {
  groupShow.value = !groupShow.value;
};

const money = ref<Number>(null);
const getDays = ref<string | number>(null);
const loading = ref(false);
const carete = async () => {
  if (!businessCode.value || businessCode.value == "null") {
    return uni.showToast({
      title: "请绑定收款商户号",
      icon: "none",
    });
  }
  loading.value = true;
  if (!money.value || !getDays.value) {
    return uni.showToast({
      title: "收费周期或金额不能为空",
      icon: "none",
    });
  }
  const response = await createCircle({
    id: getId.value,
    serviceFee: money.value,
    cycle: getDays.value == "永久" ? 999999 : getDays.value,
  });
  if (response && response?.code == 200) {
    uni.showToast({
      title: "提交成功",
      icon: "none",
    });
    loading.value = false;
    setTimeout(() => {
      uni.navigateBack({ delta: 1 });
    }, 800);
  }
};

const circleInfos = ref();
const circleInfoData = async (ids) => {
  const response = await circleInfo({ id: ids });
  if (response && response?.code == 200) {
    circleInfos.value = response?.data;
    if (formData.value.community == null) {
      formData.value.community = "";
    } else {
      formData.value.community =
        response.data.cycle == "999999" ? "永久" : response.data.cycle + "天";
    }

    money.value = response.data.serviceFee;
  }
};
</script>

<style lang="scss" scoped>
.main {
  padding: 30rpx;
}

.must {
  color: #aaaaaa;
}

.active {
  color: #0753fd !important;
}

.btns {
  padding: 0 30rpx;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 66rpx;
}

.pop-main {
  .pop-title {
    border-bottom: 1rpx solid #eee;
    padding: 34rpx 40rpx;

    .cancel,
    .confirm {
      font-family: PingFang SC Bold;
      font-size: 32rpx;
    }

    .cancel {
      color: #aaaaaa;
    }

    .confirm {
      color: #0753fd;
    }
  }

  .list {
    padding: 0 40rpx;

    .scroll-Y {
      height: 1000rpx;
      max-height: 1000rpx;

      .item {
        font-family: PingFang SC Bold;
        font-size: 28rpx;
        font-weight: normal;
        padding: 25rpx 0;
      }
    }
  }
}
</style>
